<template>
<DetailsTable :value="store.selectedCacheCalls" v-if="store.selectedCacheCalls.length > 0">
    <Column field="location" header="Location">
      <template #body="slotProps">
        <FilepathLink :filepath="slotProps.data.filename" :line="slotProps.data.line"/>
    </template>
    </Column>
  <Column field="type" header="Type" />
  <Column field="key" header="Key" />
  <Column field="hit" header="Hit" />
  <Column sortable field="duration" header="Time" class="text-right whitespace-nowrap" :pt="{headercontent: 'flex items-center justify-end'}">
    <template #body="slotProps">
      {{ Math.ceil(slotProps.data.duration) }} ms
    </template>
  </Column>
  <ColumnGroup type="footer">
    <Row>
      <Column :footer="'Total time: ' + store.selectedCacheCalls.map((q) => Math.ceil(q.duration)).reduce((a, t) => a + t) + ' ms'" :colspan="5" footerStyle="text-align:right" />
    </Row>
  </ColumnGroup>   
</DetailsTable>
<div v-else class="p-2 text-sm">
  There were no calls to cache during processing of this request.
</div>
</template>

<script setup>
import { useEventsStore } from '../stores/events';
import ColumnGroup from 'primevue/columngroup';
import Column from 'primevue/column';
import Row from 'primevue/row';
import DetailsTable from './wrappers/DetailsTable.vue';
import FilepathLink from './FilepathLink.vue';

const store = useEventsStore()
</script>